iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
自我挑戰組

新手的JavaScript扎根之路系列 第 2

Day02 JavaScript是什麼?JavaScript=Java嗎?

  • 分享至 

  • xImage
  •  

嗨嗨!我是Winnie溫尼~/images/emoticon/emoticon08.gif

前言

在開始學習JavaScript以前,我們先來認識網頁設計的三大元素「HTML 、CSS、JavaScript」

  • HTML負責建立網頁的主結構:
<h1>Hello World!</h1> 
<!-- 註解:這是一個網頁標題 -->
  • CSS 負責美化網頁樣式:
h1{
    color:blue;
}
/* 註解:將h1標題文字變成藍色 */
  • JavaScript負責描述網頁如何與用戶互動並呈現動態效果:
const title = document.querySelector("h1");
// 註解:將h1存入title變數中
title.addEventListener("click", function (e) {
  title.textContent = "你好!";
});
//註解:當title被點擊時,原本的「Hello World!」文字轉變為「你好!」

範例CodePen
換你試試!將文字改成自己喜歡的顏色,將點擊後的內容改成想說的話吧!

簡單來說,若我們以人做為比喻的話,HTML會是身體結構,CSS是衣服穿搭,JavaScript則是各種動作!

概述

JavaScript 是一個動態程式語言,應用於 HTML 文件(document)上時,就可以為網頁提供動態的互動功能,初階的應用如跑馬燈、相簿、動態版型、回應按鈕點擊等。進階應用甚至可以**製作遊戲、2D 平面以及立體的圖像、資料庫系統、桌面和行動應用程式的開發以及在伺服器端網路環境執行(如Node.js)**等等!

一般來說,完整的JavaScript包括以下幾個部分:

  • ECMAScript,描述了該語言的語法和基本物件
  • 文件物件模型(DOM),描述處理網頁內容的方法和介面
  • 瀏覽器物件模型(BOM),描述與瀏覽器進行互動的方法和介面

JavaScript的基本特點如下:

  • 是一種解釋性程式語言(代碼不進行預編譯)
  • 主要用來向HTML頁面添加互動行為
  • 可以直接嵌入HTML頁面,但寫成單獨的js檔案有利於結構和行為的分離

JavaScript常用來完成以下任務:

  • 嵌入動態文字於HTML頁面
  • 對瀏覽器事件作出回應
  • 讀寫HTML元素
  • 在資料被提交到伺服器之前驗證資料
  • 檢測訪客的瀏覽器資訊
  • 控制Cookie,包括建立和修改等

熱門度

Stackoverflow 2021年對工程師的調查,對專業工程師來說,最熱門、應用最多的程式語言是JavaScript、HTML/CSS、Python和SQL。
https://ithelp.ithome.com.tw/upload/images/20220916/20151944GvwwqW61I5.png
(圖/Stack Overflow)

GitHub Octoverse 2021年報告呈現的開發社群技術趨勢,JavaScript 從 2014 年起,已經連續 8年蟬聯 GitHub 開發者最常使用的程式語言。而隨著 AI 機器學習相關的主題越來越熱門,Python 從 2019 年起已經超越 Java,成為開發者第二常用的程式語言。
https://ithelp.ithome.com.tw/upload/images/20220916/20151944L2suL4Kntg.png
(圖/GitHub)

JavaScript ≠ Java!

剛開始學習的時候一直以為Java是JavaScript的縮寫ఠ_ఠ
JavaScript與Java在名字和語法上都很相似,但這兩門程式語言從設計之初就有很大不同。1995 年時,Netscape (網景公司) 與昇陽科技聯手完成 Netscape Navigator 2.0 的腳本語言「LiveScript」。後來由於「趕流行」而改名為「JavaScript」:因為當時網景公司與昇陽科技組成的開發聯盟為了讓這門語言搭上當時正夯的 Java 程式語言這個「熱詞」,因此臨時將 LiveScript 改名為 JavaScript,但這也成為日後大眾對這門語言有諸多誤解(如誤以為這門語言與 Java 有關)的原因之一。

參考資料

JavaScript 基礎
JavaScript
JavaScript 語言 (JavaScript Programming Language)
JavaScript 與 Java 有關係嗎?JavaScript 的編年史
2022 熱門程式語言,JavaScript、Python 哪個語言職缺最多?

新手上路,如文章有錯誤或需修正之處,懇請大家多多指教!
那麼,我們明天見囉~/images/emoticon/emoticon29.gif


上一篇
Day01 前言
下一篇
Day03 宣告你的第一個變數!
系列文
新手的JavaScript扎根之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言